<template>
	<view class="category-container">
		<!-- 分类侧边栏 -->
		<scroll-view class="category-sidebar" scroll-y>
			<view class="category-sidebar-item" :class="{ active: activeIndex === 0 }" @click="activeIndex = 0">官方店铺
			</view>
			<view class="category-sidebar-item" :class="{ active: activeIndex === 1 }" @click="activeIndex = 1">生活用品
			</view>
			<view class="category-sidebar-item" :class="{ active: activeIndex === 2 }" @click="activeIndex = 2">数码配件
			</view>
			<view class="category-sidebar-item" :class="{ active: activeIndex === 3 }" @click="activeIndex = 3">美妆个护
			</view>
			<view class="category-sidebar-item" :class="{ active: activeIndex === 4 }" @click="activeIndex = 4">家居装饰
			</view>
			<view class="category-sidebar-item" :class="{ active: activeIndex === 5 }" @click="activeIndex = 5">文具办公
			</view>
			<view class="category-sidebar-item" :class="{ active: activeIndex === 6 }" @click="activeIndex = 6">箱包配饰
			</view>
			<view class="category-sidebar-item" :class="{ active: activeIndex === 7 }" @click="activeIndex = 7">零食饮品
			</view>
			<view class="category-sidebar-item" :class="{ active: activeIndex === 8 }" @click="activeIndex = 8">玩具礼品
			</view>
			<view class="category-sidebar-item" :class="{ active: activeIndex === 9 }" @click="activeIndex = 9">服装鞋帽
			</view>
		</scroll-view>

		<!-- 分类内容 -->
		<scroll-view class="category-content" scroll-y>
			<!-- 分类横幅 -->
			<view class="category-banner">
				<image
					src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2074&q=80"
					mode="aspectFill" />
			</view>

			<!-- 子分类：旗舰店 -->
			<view class="subcategory-title">旗舰店</view>
			<view class="merchant-grid">
				<view class="merchant-item" v-for="(item, index) in flagshipStores" :key="index">
					<view class="merchant-icon">
						<image :src="item.image" mode="aspectFill" />
					</view>
					<view class="merchant-name">{{ item.name }}</view>
				</view>
			</view>

			<!-- 子分类：专卖店 -->
			<view class="subcategory-title">专卖店</view>
			<view class="merchant-grid">
				<view class="merchant-item" v-for="(item, index) in specialtyStores" :key="index">
					<view class="merchant-icon">
						<image :src="item.image" mode="aspectFill" />
					</view>
					<view class="merchant-name">{{ item.name }}</view>
				</view>
			</view>

			<!-- 子分类：专营店 -->
			<view class="subcategory-title">专营店</view>
			<view class="merchant-grid">
				<view class="merchant-item" v-for="(item, index) in franchiseStores" :key="index" @click="toList(item)">
					<view class="merchant-icon">
						<image :src="item.image" mode="aspectFill" />
					</view>
					<view class="merchant-name">{{ item.name }}</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	const activeIndex = ref(0)

	const flagshipStores = ref([{
			image: 'https://images.unsplash.com/photo-1555396273-367ea4eb4db5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2074&q=80',
			name: '名创优品旗舰店'
		},
		{
			image: 'https://images.unsplash.com/photo-1604719312566-8912e9c8a213?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2074&q=80',
			name: '名创优品国际店'
		},
		{
			image: 'https://images.unsplash.com/photo-1441986300917-64674bd600d8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
			name: '名创优品全球购'
		}
	])

	const specialtyStores = ref([{
			image: 'https://images.unsplash.com/photo-1607082348824-0a96f2a4b9da?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
			name: '名创优品生活馆'
		},
		{
			image: 'https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
			name: '名创优品数码馆'
		},
		{
			image: 'https://images.unsplash.com/photo-1572635196237-14b3f281503f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2080&q=80',
			name: '名创优品美妆馆'
		}
	])

	const franchiseStores = ref([{
			image: 'https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
			name: '数码专营店'
		},
		{
			image: 'https://images.unsplash.com/photo-1572635196237-14b3f281503f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2080&q=80',
			name: '美妆专营店'
		},
		{
			image: 'https://images.unsplash.com/photo-1607082348824-0a96f2a4b9da?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80',
			name: '家居专营店'
		}
	])

	const toList = (item) => {
		uni.navigateTo({
			url: `/subpackage_merchant/merchant/merchant_list?id=${item.id}`
		})
	}
</script>

<style lang="scss">
	.category-container {
		display: flex;
		height: 100vh;
	}

	.category-sidebar {
		width: 80px;
		background-color: #f5f5f5;
	}

	.category-sidebar-item {
		padding: 15px 0;
		text-align: center;
		font-size: 13px;
		position: relative;
	}

	.category-sidebar-item.active {
		background-color: #fff;
		color: var(--primary-color);
	}

	.category-sidebar-item.active::before {
		content: '';
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 3px;
		height: 16px;
		background-color: var(--primary-color);
	}

	.category-content {
		flex: 1;
		padding: 15px;
	}

	.category-banner {
		width: 100%;
		height: 100px;
		border-radius: 8px;
		overflow: hidden;
		margin-bottom: 15px;
	}

	.category-banner image {
		width: 100%;
		height: 100%;
	}

	.subcategory-title {
		font-size: 15px;
		font-weight: bold;
		margin-bottom: 15px;
	}

	.merchant-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 15px;
		margin-bottom: 20px;
	}

	.merchant-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.merchant-icon {
		width: 60px;
		height: 60px;
		border-radius: 30px;
		overflow: hidden;
		margin-bottom: 8px;
		border: 1px solid var(--border-color);
	}

	.merchant-icon image {
		width: 100%;
		height: 100%;
	}

	.merchant-name {
		font-size: 12px;
		text-align: center;
		color: var(--text-color);
	}
</style>